<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统 - 管理员登录</title>
    <link rel="stylesheet" href="<c:url value="/static/css/layui.css"/>">
    <link rel="icon" href="<c:url value="/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/static/layui.js"/>"></script>
    <script src="<c:url value="/static/sha256.js"/>"></script>
</head>

<body style="padding: 50px 0; background-color: #f2f2f2">
<!-- 页面内容 -->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md4 layui-col-md-offset4">
        <div class="layui-card">
            <div class="layui-card-header" style="height: 72px">
                <h1 style="line-height: 72px; height: 72px; text-align: center">管理员登录</h1>
            </div>

            <div class="layui-card-body">
                <form id="login-form" class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户</label>
                        <div class="layui-input-block">
                            <!-- 带提示的用户名输入框 -->
                            <div class="layui-form-select">
                                <div class="layui-select-title">
                                    <input type="text" name="name" id="name" lay-verify="required|name"
                                           placeholder="请输入账户名" autocomplete="off" class="layui-input">
                                </div>
                                <dl id="name-suggest" class="layui-anim layui-anim-upbit" style=""></dl>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <!-- 密码输入框 -->
                            <input type="password" id="pass" lay-verify="required|pass"
                                   placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-layer-btn-c">
                        <!-- 提交按钮 -->
                        <button type="submit" lay-submit lay-filter="login" class="layui-btn">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 页面逻辑 -->
<script>
    // 引入 LayUI
    layui.use(['form', 'layer', 'jquery'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        // AJAX 防抖
        function debounce(time, handler) {
            var debounce = null;
            return function (e) {
                clearTimeout(debounce);
                debounce = setTimeout(function () {
                    handler(e);
                }, time);
            }
        }

        // 表单内容验证
        form.verify({
            name: function (value) {
                if (!/\w{1,32}/u.test(value)) {
                    return "用户名必须是 1-32 位字符或数字！";
                }
            },
            pass: function (value) {
                if (!/^[\w!"#$%&'()*+,\-./:;<=>?@\[\\\]^_‘{|}~]{2,32}$/.test(value)) {
                    return "密码必须是 2-32 位英文字符、数字或符号！";
                }
            }
        });

        // 设置用户名存在性检查
        var $name = $('#name');
        $name.blur(debounce(200, function () {
            $('#name-suggest').hide();
            $.ajax({
                url: '<c:url value="/api/admin/exists"/>',
                type: 'post',
                dataType: 'json',
                data: {name: $('#name').val()},
                success: function (result) {
                    if (result && result.code === 0) {
                        if (!result.exists) {
                            layer.tips("账户未注册！", "#name");
                        }
                    }
                }
            })
        }));

        // 设置用户名输入框的提示信息
        $name.keyup(debounce(200, function () {
            var prefix = $('#name').val();
            $.ajax({
                url: '<c:url value="/api/admin/names"/>',
                type: 'post',
                data: {prefix: prefix},
                dataType: 'json',
                success: function (result) {
                    if (result && result.code === 0) {
                        var $list = $('#name-suggest');
                        $list.hide();
                        $list.empty();
                        for (var item of result.data) {
                            var $item = $('<dd lay-value="' + item + '">' + item + '</dd>');
                            $item.click((function (item) {
                                return function () {
                                    $('#name').val(item);
                                };
                            })(item));
                            $list.append($item);
                        }
                        if (result.data.length > 0) {
                            $list.show();
                        }
                    } else {
                        layer.msg('获取提示失败' + (result && result.msg ? ": " + result.msg : "") + "！");
                    }
                }
            });
        }));

        // 登录
        form.on('submit(login)', function () {
            var name = $('#name').val().trim();
            var crypt = sha256('crypt[' + $('#pass').val().trim() + ']');
            $.ajax({
                url: "<c:url value="/api/admin/login"/>",
                type: "post",
                data: {name: name, crypt: crypt},
                dataType: 'json',
                success: function (result) {
                    if (result && result.code === 0) {
                        layer.msg('登录成功，进入管理系统...');
                        setTimeout(function () {
                            location.href = "<c:url value="/manage.jsp"/>";
                        }, 1000);
                    } else {
                        layer.msg('登录失败' + (result && result.msg ? ": " + result.msg : "") + "！");
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>
